<template>
  <tbody>
    <tr>
      <td>
        <input type="checkbox" :checked="item.checked" @click="changeChecked" />
      </td>
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
      <td>
        <button @click="changeNum(-1)">-</button>
        {{ item.num }}
        <button @click="changeNum(1)">+</button>
      </td>
      <td>{{ item.price * item.num }}</td>
      <td><button @click="delFn">删除</button></td>
    </tr>
  </tbody>
</template>

<script>
export default {
  props: {
    item: Object,
    index: Number,
  },
  methods: {
    changeNum(count) {
      if (this.item.num + count < 1) return
      this.$store.commit('changeNum', {
        index: this.index,
        num: this.item.num + count,
      })
    },
    delFn() {
      this.$store.commit('delGood', this.index)
    },
    changeChecked() {
      this.$store.commit('changeChecked',this.index)
    },
  },
}
</script>

<style scoped>
tbody {
  text-align: left;
}
tbody td {
  width: 60px;
}
</style>
